iT邦幫忙

2023 iThome 鐵人賽

DAY 27
0
Vue.js

重新認識 Vue.js系列 第 27

重新認識 Vue.js Day27:Vuetify

  • 分享至 

  • xImage
  •  

今天要來介紹 Vuetify 這個 Vue 的框架,與 element-plus 相似,他一樣提供許多的元件可以讓使用者快速的構建自己的網頁,然而與 element-plus 比較不同的有這些內容

優點

  1. 響應式斷點: element-plus 由於主要是提供後台構建的部分,因此最多只有支援到直式平板的寬度(768px),然而 Vuetify 支援到手機尺寸(600px 以下),並且,若支援的斷點不是你要的還可以進行客製化
  2. 圖標支援: Vuetify 支援直接使用 material design icons (Google Fonts),內含大量圖標可以使用
  3. 生態圈: Vuetify 的使用者較 element-plus 多了不少,若有問題災情可以看到網路上比較多人在討論

缺點

然而除了上面提到的優點,Vuetify 由於他希望能夠應用到大部分的情況,因此元件內有了許多的條件與邏輯,在個人排錯上會比較痛苦;並且由於有許多高度計算式動態計算,因此套用在 Nuxt 架構上時會因為渲染時間不同造成高度計算錯誤

結論

若今天為一個公司內部使用的後台管理程序,可以考慮優先使用 element-plus 來進行設計,內部的東西雖然較少但已經可以滿足大部分後台使用了;但若是需要放到前台與使用者互動,並且要求更高的美感,那還是套用 Vuetify 吧


上一篇
重新認識 Vue.js Day26:Element Plus
下一篇
重新認識 Vue.js Day28:Vue-chart
系列文
重新認識 Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言